<%@ include file="/WEB-INF/views/common/includes.jsp"%>
<head>
<script type="text/javascript">

function addRecipe() {
	var recipes = document.getElementById("recipes");
	var isSelected=false;	
	var selectedRecipe = recipes.options[recipes.selectedIndex].text;
	var selectedId = recipes.options[recipes.selectedIndex].value;
	
	var select = document.getElementById("myselect");
	var nameSelect = document.getElementById("myNameSelect");
	
	var i;
	
	for(i = 0; i < select.options.length;i++){
		if(!selectedRecipe.localeCompare(select.options[i].text)){
			isSelected=true;
		}
	}
	
	if(!isSelected){
		nameSelect.options[nameSelect.options.length] = new Option(selectedRecipe);

		select.options[select.options.length] = new Option(selectedId);
		isSelected = false;
	}
	else{
		alert("You can only add 1 recipe to the same menu!");
	}
	
}

function selectAllOptions(id) {
	var ref = document.getElementById(id);
	
	for (i = 0; i < ref.options.length; i++){
		ref.options[i].selected = true;
	}
}

</script>
</head>
<body>
	<c:if test="${not empty param.success}">
		<div class="alert alert-success">
			<button type="button" class="close" data-dismiss="alert">
				<i class="icon-remove"></i>
			</button>
			<i class="icon-ok-sign"></i> You successfully created a <strong>menu!</strong>
		</div>
	</c:if>
	
	<form name="form1" method="post" action="saveMenu" enctype="multipart/form-data">
		<label> Menu name:</label> <br> <input type="text" name="name"
			style="width: 20%;">
		<br>
		
		<c:if test="${not empty recipes}">
			<select id="recipes">
				<c:forEach var="text" items="${recipes}">
					<option value="${text.id}">${text.recipe_name}</option>
				</c:forEach>
			</select>
		</c:if>
		
		<br> <input type="button" onclick="addRecipe()" value="Add recipe" />
		
		<br><br>
		<select id="myselect" name="mydata" multiple="multiple" hidden=true style="width: 20%; height: 200px">
		</select><br>
		<select id="myNameSelect" name="myNameData" multiple="multiple" style="width: 20%; height: 200px">
		</select>
		<br>
		
		<input type="submit" value="Save Menu" onClick="selectAllOptions('myselect')"/>

		
	</form>
</body>